<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        简单选择器：
            标签选择器
            类(class)选择器，申明关键字 .
            id选择器, 申明关键字 #
        */
        div{
            background-color: #dedede;
        }
        .fc{
            color: orange;
        }
        #title{
            font-weight: bold;
        }
        /* 
            组合选择器：通过多层基础选择器定义，实现精确的元素选择
        */
        /* 父元素具有box类样式，同时子元素具有item类选择器，样式才会加载 */
        /* 后代选择器 */
        .box .item{
            color: red;
            font-weight: bold;
        }
        /* 子元素 */
        .box>.item{
            font-style: italic;
        }
        /* 相邻且后续的兄弟元素选择器 */
        .tip+.choose{
            background-color: aqua;
        }
        /* 
        伪类选择器(状态选择器)：使用内置的固定状态关键字和其它选择器进行组合
        */
        .nav-btn:hover{
            background-color: #333;
            color: white;
        }
        .switch{
            /* 改变元素的页面规则 */
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: #dedede;
            /* border-radius: 25% 25% 25% 25% / 50% 50% 50% 50% ;  */
            /* border-radius: 25% / 50%;  */
            /* 当矩形元素设置的圆角半径远大于元素的最大取值，会自动切为圆角矩形 */
            border-radius: 1000px;
            box-shadow: 0 0 6px #333 inset;
        }
        .switch input{
            /* 将元素进行隐藏 */
            display: none;
        }
        .switch span{
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            transform: scale(0.7);
            box-shadow: 0 0 6px #666;
            transition: all 0.5s ease;
        }
        /* 复选框被选中时 */
        .switch input:checked+span{
            /* 在class=switch的内部找到input元素，当改元素为复选框且选中中，操作相邻兄弟元素span */
            color: red;
            margin-left: 50%;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="title"> Miniature Schnauzer </div>
    <br>
    <!-- 
    id选择可以在多个标签上定义相同的取值，用于样式加载
        ！！在开发约定中不建议一个HTML页面中出现相同取值id属性
            基础语法=>强制性语法
            约定语法=>非强制但需要遵守的语法
    -->
    <div class="fc" id="title"> Treeing Cur </div>
    <br>
    <div> Brussels Griffon </div>
    <br>
    <div class="fc"> Saint Hubert Jura Hound </div>
    <br>

    <div class="box">
        <ul>
            <li>元素1</li>
            <li>元素2</li>
            <li class="item">元素3</li>
            <li>元素4</li>
            <li>元素5</li>
            <li>元素6</li>
        </ul>
        <p class="item">子元素</p>
    </div>
    <div class="content">
        <ul>
            <li>元素1</li>
            <li>元素2</li>
            <li class="item">元素3</li>
            <li>元素4</li>
            <li>元素5</li>
            <li>元素6</li>
        </ul>
    </div>
    <hr>
    <p class="choose">class=choose的元素</p>
    <p class="tip">class=tip的元素</p>
    <p class="choose">class=choose的元素</p>

    <hr>
    <p class="nav-btn">悬停提供颜色</p>

    <hr>
    <!-- switch 开关 -->
    <label class="switch">
        <!-- 原生复选框很难实现样式美化 -->
        <input type="checkbox">
        <span></span>
    </label>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>